// 导入必要的 Vue 核心功能和组件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// 导入 Element Plus UI 框架
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 导入 Element Plus 的图标组件
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

/**
 * 防抖函数：用于限制函数的执行频率
 * @param {Function} fn - 需要防抖的函数
 * @param {number} delay - 延迟时间（毫秒）
 * @returns {Function} - 返回防抖处理后的函数
 */
const debounce = (fn, delay) => {
  let timeoutId
  return (...args) => {
    clearTimeout(timeoutId)
    timeoutId = setTimeout(() => fn.apply(this, args), delay)
  }
}

/**
 * 处理 ResizeObserver 相关的错误信息
 * 这是为了解决 Element Plus 中的已知问题
 * 通过重写 console.error 来过滤掉特定的错误消息
 */
const resizeHandler = debounce(() => {
  // 需要过滤的错误消息列表
  const messages = [
    'ResizeObserver loop completed with undelivered notifications.',
    'ResizeObserver loop limit exceeded'
  ]
  
  // 保存原始的 console.error 方法
  const error = console.error
  // 重写 console.error 方法
  console.error = (...args) => {
    if (args.length > 0) {
      const firstArg = args[0]
      // 如果错误消息包含在过滤列表中，则不输出
      if (typeof firstArg === 'string' && messages.some(message => firstArg.includes(message))) {
        return
      }
    }
    // 对于其他错误消息，使用原始的 console.error 输出
    error.apply(console, args)
  }
}, 50)

// 立即执行 resizeHandler
resizeHandler()

// 创建 Vue 应用实例
const app = createApp(App)

// 注册所有 Element Plus 图标组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

// 使用 Element Plus UI 框架
app.use(ElementPlus)
// 使用路由
app.use(router)
// 将应用挂载到 #app 节点
app.mount('#app')

